<template>
    <div id="app" class="carousel">
        <div class="messageNav">
            <div>
                <div><span class="glyphicon glyphicon-retweet"></span></div>
                <div>轮播管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-retweet"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    轮播管理
                </div>
            </div>
        </div>
        <div class="harnDeta" v-loading.body="loading" element-loading-text="拼命加载中">
            <div class="harnNav">
                <div class="seek">
                </div>
                <div class="add" @click="addPopupClick">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="detail">
                <ul>
                    <li class="firstLi">
                        <div>轮播标题</div>
                        <div>图片</div>
                        <div>链接</div>
                        <div>创建时间</div>
                        <div class="delHarn">操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>无</div>
                        <div class="imgLi">
                            <img :src="item.img | imgUrlFun" alt="">
                            <div class="bgImgLi">
                                <img :src="item.img | imgUrlFun" alt="">
                            </div>
                        </div>
                        <div v-if="item.url.length > 0">{{item.url}}</div>
                        <div v-else>无</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div class="delHarn">
                            <template>
                                <el-button class="elbut" type="text" @click="delClick(index)">
                                    <span class="glyphicon glyphicon-trash"></span>删除
                                </el-button>
                            </template>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加通知弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-loading.body="adding" :style="{width:addWidth + 'px'}" v-show="isAddShow">
                    <div>
                        <h2>添加轮播</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide addSideS">
                        <div><small></small>通知标题：</div>
                        <div><input type="text" v-model="messObj.name" placeholder="请输入通知标题"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>图片：</div>
                        <div id="upDateImg">
                            <div v-show="showUpImage"><img class="showUpImage" :src="ipImage" alt=""></div>
                            <div v-if="!showUpImage">
                                <label for="filea">点击添加图片</label>
                                <input type="file" @change="headImageChange" name="file" id="filea" multiple>
                            </div>
                            <div v-else>
                                <div @click="removeUpImage" class="removeImage">点击删除图片</div>
                            </div>
                        </div>
                    </div>
                    <div class="addSide addSideS">
                        <div><small>*</small>链接：</div>
                        <div><input type="text" v-model="messObj.linStr" placeholder="请输入链接"></div>
                    </div>
                    <div class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="addClick" class="addClick">添加</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'carousel',
        data() {
            return {
                showUpImage: false,
                nullShow: true,
                showFileList: true,
                addWidth: '530',
                items: [
                ],
                pageSizeNum: 20,
                totalNum: 0,
                currentPage: 1,
                isAddPopup: true,
                isShowAdd: true,
                isAddShow: false,
                messObj: {
                    name: '',
                    linStr: ''
                },
                promptStr: '',
                imgUrl: '',
                loading: false,
                adding: false,
                dataFile: {},
                ipImage: ''
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            },
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')
        
        },
        methods: {
            // 图片选中时触发
            headImageChange(e) {
                let self = this;
                var file = e.target.files[0]
                self.dataFile = e.target.files[0]
                console.log(e.target.files[0])
                // 看支持不支持FileReader
                if (!file || !window.FileReader) return;
                if (/^image/.test(file.type)) {
                    self.promptStr = '带 * 号为必填项'
                    // 创建一个reader
                    var image = new Image();
                    var reader = new FileReader();
                    // 将图片将转成 base64 格式
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        self.showUpImage = true;
                        self.ipImage = e.target.result;
                    };
                    self.imgUrl = window.URL.createObjectURL(file)
                } else {
                    self.promptStr = '图片格式只能为png或者jpg'
                }
            },
            // 删除选中图片
            removeUpImage() {
                this.showUpImage = false;
                this.imgUrl = ''
            },
            // 汉字正则
            strReg: function (str) {
                var regu = /[\u4E00-\u9FA5]{1,15}/g
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 网址正则
            urlReg: function (str) {
                var regu = '^((https|http|ftp|rtsp|mms)?://)'
                    + '?(([0-9a-z_!~*\'().&=+$%-]+: )?[0-9a-z_!~*\'().&=+$%-]+@)?' //ftp的user@
                    + '(([0-9]{1,3}.){3}[0-9]{1,3}' // IP形式的URL- 199.194.52.184
                    + '|' // 允许IP和DOMAIN（域名）
                    + '([0-9a-z_!~*\'()-]+.)*' // 域名- www.
                    + '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' // 二级域名
                    + '[a-z]{2,6})' // first level domain- .com or .museum
                    + '(:[0-9]{1,4})?' // 端口- :80
                    + '((/?)|' // a slash isn't required if there is no file name
                    + '(/[0-9a-z_!~*\'().;?:@&=+$,%#-]+)+/?)$';
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 设置每页个数
            handleSizeChange(val) {
                this.pageSizeNum = val;
                var self = this;
                self.loading = true
                self.getNoticeAll({
                    pageSize: val,
                    number: 1
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data
                            self.totalNum = data.data.data.length
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getNoticeAll({
                    pageSize: self.pageSizeNum,
                    number: val
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data
                            self.totalNum = data.data.data.length
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))

            },
            // 显示添加通知弹出框
            addPopupClick() {
                this.isShowAdd = false
                this.isAddShow = true
                this.showUpImage = false;
                this.ipImage = ''
                this.messObj.linStr = ''
            },
            // 取消添加通知弹出框
            calladd() {
                this.isShowAdd = true
                this.isAddShow = false
                this.imgUrl = ''
            },
            // 添加通知
            addClick() {
                var self = this;
                var imgTure = self.imgUrl
                if (imgTure.length > 0 && self.messObj.linStr.length > 0) {
                    self.promptStr = '带 * 号为必填项'
                    // 添加通知
                    const formData = new FormData()
                    formData.append("file", self.dataFile)
                    var userId = sessionStorage.getItem('userId')
                    self.getNoticeFileAdd(formData).then((data) => {
                        console.log("上传后的图片", data.data.data[0])
                        self.adding = true
                        if (data.data.code == "200") {
                            self.getNoticeAdd({
                                opid: userId,
                                img: data.data.data[0],
                                url: self.messObj.linStr
                            }).then((data) => {

                                self.adding = false
                                if (data.data.code == "200") {
                                    self.loading = true
                                    self.isShowAdd = true
                                    self.isAddShow = false
                                    self.showUpImage = false;
                                    self.imgUrl = ''
                                    self.messObj.linStr = ''
                                    self.getNoticeAll({
                                        pageSize: self.pageSizeNum,
                                        number: self.currentPage
                                    }).then((data) => {

                                        self.loading = false
                                        if (data.data.code == "200") {
                                            if (data.data.data.length > 0) {
                                                self.nullShow = false
                                                self.items = data.data.data
                                                self.totalNum = data.data.data.length
                                            } else {
                                                self.nullShow = true
                                            }
                                        }
                                    }).catch(msg => console.log(msg))
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (imgTure.length == 0) {
                        this.promptStr = '图片为必填项'
                    } else if (self.messObj.linStr.length == 0) {
                        this.promptStr = '文本链接为必填项'
                    }
                }
            },
            // 删除通知
            delClick(index) {
                var self = this;
                var userId = sessionStorage.getItem('userId')
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.getNoticeDel({
                        opid: userId,
                        id: self.items[index].id
                    }).then((data) => {

                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getNoticeAll({
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {

                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data
                                        self.totalNum = data.data.data.length
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            ...mapActions(['getNoticeAll','getNoticeAdd','getNoticeDel','getNoticeFileAdd'])
        },
    }

</script>

<style scoped src="../../assets/css/carousel.css">

</style>